<template>
  <div class="map-info">
    <div class="mapBox">
      <div style="width: 100%; height: 100%">
        <div class="pointContent"
             v-for="item in pointList"
             :key="item.id"
             :style="item.style"
             @click="selectLocationIdFun(item)">
          <point-offline :select="item.id == deviceId ? true : false"
                         v-if="item.state == 'OFFLINE'"></point-offline>
          <point-err :select="item.id == deviceId ? true : false"
                     v-if="item.state != 'OFFLINE'&&item.alert"></point-err>
          <point-no-err :select="item.id == deviceId ? true : false"
                        v-if="item.state != 'OFFLINE'&&!item.alert"></point-no-err>

          <div :class="item.state == 'OFFLINE' ? 'offline' :item.alert == false ?'noerr':'err'"
               class="locationName_cur"
               ref="TheStyle"
               v-show="item.id == deviceId ? true : false">
            <div>{{ item.code }}</div>
          </div>
          <div :class="item.state == 'OFFLINE' ? 'offline' :item.alert == false ?'noerr':'err'"
               class="locationName"
               ref="TheStyle"
               v-show="item.id != deviceId ? true : false">
            <div>{{ item.code }}</div>
          </div>
        </div>
      </div>
      <img :src="require(`@/assets/optMap/opt1.png`)"
           style="width:100%" />
    </div>
  </div>
</template>

<script>
import pointErr from "./pointErr";
import pointNoErr from "./pointNoErr";
import pointOffline from "./pointOffline";
export default {
  props: {
    msg: String,
    deviceId: String,
    allDeviceData: Array,
    pointList: Array,
    selectFloor: String
  },
  components: {
    pointErr,
    pointNoErr,
    pointOffline
  },
  watch: {
    allDeviceData: {
      deep: true,
      handler(newVal, oldVal) {
        if (Array.isArray(this.allDeviceData)) {
          for (let i = 0; i < this.allDeviceData.length; i++) {
            const alertEl = this.allDeviceData[i];
            for (let j = 0; j < this.pointList.length; j++) {
              const pointEl = this.pointList[j];
              if (alertEl.deviceId == pointEl.id) {
                this.pointList[j].alert = alertEl.alert;
                this.pointList[j].state = alertEl.state;
              }
            }
          }
        }


      }
    }
  },
  mounted() {
  },
  data() {
    return {
    };
  },
  methods: {
    selectLocationIdFun(item) {
      this.$emit("selectLocationIdFun", item);
    }
  }
};
</script>

<style scoped>
</style>
